<!--我收到评价-->
<template>
    <f7-page no-toolbar class="background-color: #f4f5f5;"
             infinite
             :infinite-distance="50"
             :infinite-preloader="showPreloader"
             @infinite="loadMore"
    >
        <f7-navbar title="我收到的评价" back-link="Back">
        </f7-navbar>

        <f7-block-title class="margin-top">所有的都是匿名评价哦,左滑可参与哟！</f7-block-title>
        <f7-list  media-list>
            <f7-list-item v-for="(item, index) in items" :key="index" style="line-height: 280px;"
                          swipeout
                          text="是个好人，幽默帅气，有风度是个好人，幽默帅气，有风度是个好人，幽默帅气，有风度是个好人，幽默帅气"
            >
                <f7-swipeout-actions right>
                    <f7-swipeout-button round>隐藏</f7-swipeout-button>
                    <f7-swipeout-button color="blue">展示</f7-swipeout-button>
                </f7-swipeout-actions>

                <!--        <f7-swipeout-actions right>
                          <f7-swipeout-button confirm-text="您确定不认同吗？">不认同</f7-swipeout-button>
                          <f7-swipeout-button color="blue" confirm-text="您确定认同吗？">认同</f7-swipeout-button>
                        </f7-swipeout-actions>-->
            </f7-list-item>

        </f7-list>


<!--        <f7-toolbar bottom>
            <f7-link icon-f7="heart" style="margin-left: 10%;" target="_blank" text="收藏TA" ></f7-link> &lt;!&ndash;heart_fill&ndash;&gt;
            <f7-link icon-f7="star_fill" style="margin-right: 10%;" target="_blank" text="关注TA" ></f7-link> &lt;!&ndash;star_fill&ndash;&gt;
        </f7-toolbar>-->

    </f7-page>
</template>

<script>
    import labelListEdit from '../../components/labelListEdit.vue';


    export default {
        components: {labelListEdit},
        data() {
            return {
                showPreloader: true,
                items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
                swiperParams: {
                    // speed: 500,
                    loop: true,
                    // height:600,
                    // autoplay: {
                    //   delay: 1500,
                    // },
                    direction:'vertical'
                    // preventLinksPropagation: false   // 阻止点击事件冒泡
                },
            };
        },
        methods: {
            refresh(event, done) {
                setTimeout(() => {
                    // todo
                    done();
                }, 1000);
            },

            loadMore() {
                const self = this;
                if (!self.allowInfinite) return;
                self.allowInfinite = false;

                setTimeout(() => {
                    if (self.items.length >= 200) {
                        self.showPreloader = false;
                        return;
                    }

                    const itemsLength = self.items.length;

                    for (let i = 1; i <= 20; i += 1) {
                        self.items.push(itemsLength + i);
                    }

                    self.allowInfinite = true;
                }, 1000);
            },

        }
    }
</script>
